<template>
	<div class="index" id="index">
		<div class="nav w clearfix">
			<a class="loginLinkJy" href="https://www.jianyu360.com/" target="_blank"></a>
			<a v-if="loginShowToggle" id="userLogin" class="login" @click="login" href="#">登录</a>
			<div v-else class="login-success fr">
				<img v-if="validator.login.userImgShow" :src="validator.login.defloginImg" />
				<img v-else :src="validator.login.userImg" />
				<el-dropdown class="login-right" placement="bottom">
					<span class="el-dropdown-link">{{validator.login.iphoneNumber}}</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item v-show="hasLoginType" class="bs">
							<router-link to="/settings">账号设置</router-link>
						</el-dropdown-item>
						<el-dropdown-item id="tuichu">退出</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
			<ul class="link">
				<li>
					<router-link to="/">首页</router-link>
				</li>
				<li>
					<router-link class="index-2" to="/scene">应用场景</router-link>
				</li>
				<li>
					<el-dropdown trigger="click" size="small" placement="bottom">
						<span class="el-dropdown-link navdown ">
                            控制台<i class="el-icon-arrow-down el-icon--right linksanjiao"></i>
                        </span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>
								<div @click="goDev" v-if="!loginShowToggle">开发者申请</div>
								<div v-else @click="goLogin">请登录</div>
							</el-dropdown-item>
                            <el-dropdown-item>
                                <router-link v-show="ProShow" to="/subscribe">订阅Pro</router-link>
                            </el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</li>
			</ul>
		</div>
		<!--路由-->
		<transition :name="transitionName">
			<router-view class="child-view" />
		</transition>
		<!--底部-->
		<div class="footer">
			<div v-if="footerShow" class="info">
				<div class="w inner">
					<div class="item">
						<div class="icon">
							<i class="iconfont icon-PREE"></i>
						</div>
						<div class="dd"></div>
						<p>免费</p>
					</div>
					<div class="item">
						<div class="icon">
							<i class="iconfont icon-api"></i>
						</div>
						<div class="dd"></div>
						<p>API接口</p>
					</div>
					<div class="item">
						<div class="icon">
							<i class="iconfont icon-wangluo"></i>
						</div>
						<div class="dd"></div>
						<p>全国全行业数据开放</p>
					</div>
					<div class="item">
						<div class="icon">
							<i class="iconfont icon-icon-data-edit"></i>
						</div>
						<div class="dd"></div>
						<p>数据规则自由定义</p>
					</div>
				</div>
			</div>
			<div class="firendlink">
				<div class="inner w">
					<ul>
						<li>
							<a href="https://www.jianyu360.com/front/aboutus.html">关于剑鱼</a>
						</li>
						<li>
							<router-link to="/devWiki">开发者协议</router-link>
						</li>
						<li>
							<router-link to="/us">联系我们</router-link>
						</li>
						<li class="hover-qr">
							<div class="s-qr">
								<img :src="qr" alt="二维码">
							</div>
							<a href="javascript:void(0)"><i class="iconfont icon-gongzhonghao"></i>关注我们</a>
						</li>
					</ul>
				</div>

			</div>
		</div>
		<!--遮罩-->
		<div class="master" v-show="masterStatus.masterShow">
			<!--登录-->
			<div class="m-login" v-show="masterStatus.loginShow">
				<div class="login-title">使用剑鱼账号登录</div>
				<div class="login-inner clearfix">
					<div class="left fl">
						<p>微信扫码登录</p>
						<img :src="validator.login.loginEwm" />
						<p class="bottom">
							使用微信扫描登录<br/>新用户自动注册
						</p>
					</div>
					<div class="right fr">
						<p>手机登录</p>
						<div class="inner">
							<div @keyup.enter="loginSubmit">
								<label><input
                                        v-model="validator.login.Tel"

                                        :class="{'error':validator.login.IphoneError}"
                                        class="iphone" type="text"
                                        placeholder="手机号码" name=""  value=""
                                /></label>
								<label><input v-model="validator.login.pass" class="passwrod" type="password" :class="{'error':validator.login.passError}" placeholder="密码" name=""  value=""/></label>
								<input type="button" @click="loginSubmit" class="submit" value="登录" />
								<p class="bottom">
									<a href="javascript:;" @click="retrievePassword">忘记密码</a>
									<a href="javascript:;" class="fr" @click="register">立即注册</a>
								</p>
							</div>
						</div>

					</div>

				</div>
				<!--close-->
				<div @click="close" class="close"></div>
			</div>
			<!--注册-->
			<div class="m-register" v-show="masterStatus.regsShow">
				<div class="register-title">注册剑鱼账号</div>
				<div class="reg-from" action="" method="">
					<label><input class="iphone" type="text"
                                  v-model="validator.res.Tel"
                                  @input="inputChange('reg')"
                                  :class="{'error':validator.res.IphoneError}"
                                  placeholder="手机号码"
                    /></label>
					<div @click="huakuai1Show" class="img-click">{{validator.regText}}</div>
					<label class="yzm clearfix">
                        <input class="fl" v-model="validator.res.regYzm" placeholder="验证码" type="text" name="" value=""/>
                        <div v-show="yanzhengma.show" @click="huoquyanzhengma()" class="huoqu fr">{{yanzhengma.text}}
                        </div>
                        <div v-show="!yanzhengma.show" class="huoqu fr">{{yanzhengma.count+'s'}}</div>
                    </label>
					<label><input class="passwrod" v-model="validator.res.pass" :class="{'error':validator.res.passError}" type="password" placeholder="设置密码" name="" value=""/></label>
					<label><input class="passwrod" v-model="validator.res.repeatPass" @input="repeatPass" :class="{'error':validator.res.repeatError}" type="password" placeholder="确认密码" name="" value=""/></label>
					<input type="button" class="submit" @click="registerZh" value="注册" />
					<a @click="repeatLogin" class="yijing" href="javascript:;">我已注册，现在就登录</a>
				</div>
				<!--close-->
				<div @click="close" class="close"></div>
			</div>
			<!--找回密码-->
			<div class="retrievePassword" v-show="masterStatus.retrievePassword">
				<div class="retrievePassword-title">找回密码</div>
				<div class="retrievePassword-from">
					<label><input class="iphone" type="text"
                                  v-model="validator.pass.Tel"
                                  @input="inputChange('pass')"
                                  :class="{'error':validator.pass.IphoneError}"
                                  placeholder="手机号码" name="" value=""
                    /></label>
					<div @click="huakuai2Show" class="img-click">{{validator.zhaohuiText}}</div>
					<label class="yzm clearfix">
                        <input class="fl" v-model="validator.pass.passYzm"  placeholder="验证码" type="text" autocomplete="off" name="" value=""/>
                        <div v-show="yanzhengma.show" @click="zhaohuimima()" class="huoqu fr">{{yanzhengma.text}}</div>
                        <div v-show="!yanzhengma.show" class="huoqu fr">{{yanzhengma.count+'s'}}</div>
                    </label>
					<label><input class="passwrod" :class="{'error':validator.pass.newPass}" v-model="validator.pass.zzxmm" type="password" autocomplete="off" placeholder="设置新密码" name="" value=""/></label>
					<input type="button" @click="zhaohuimimaSubmit" class="submit" value="确定" />
				</div>
				<!--close-->
				<div @click="close" class="close"></div>
			</div>
			<!--验证滑块-->
			<div @click="closeHk" class="zhuce" v-show="validator.huakuai1Show">
				<div id="huakuai1" @click.stop="">

				</div>
			</div>
			<div @click="closeHk" class="zhaohui" v-show="validator.huakuai2Show">
				<div id="huakuai2" @click.stop="">

				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Dropdown from 'element-ui'

	require('../static/web/js/jquery.min.js')
	require('../static/web/js/verify.js')
	import $ajax from '../api/config'
	import { outUser, getQr, login, hasLogin, regstier, regstierYz, zhaohuimima } from '../api/getData.js'

	export default {
		name: 'index',
		data: function() {
			return {
				qr: '/jyop/qr/' + window.localStorage.getItem("qrCodeKey"),
				/*登录切换头像状态*/
				loginShowToggle: true, //切换登录和登录状态
				transitionName: 'slide-left',
				footerShow: true,
				hasLoginType: true, //手机号登录显示设置
				ProShow:false,//PRO显示影藏
				masterStatus: {
					masterShow: false,
					loginShow: false,
					regsShow: false,
					retrievePassword: false

				},
				yanzhengma: {
					show: true,
					count: '',
					timer: null,
					text: '获取验证码'
				},
				/*验证*/
				validator: {
					login: {
						IphoneError: false,
						passError: false,
						Tel: '',
						pass: '',
						/*登录电话*/
						iphoneNumber: '',
						defloginImg: require('../assets/login-img.png'),
						userImg: '',
						userImgShow: true,
						loginEwm: ''

					},
					res: {
						IphoneError: false,
						passError: false,
						repeatError: false,
						Tel: '',
						pass: '', //密码1
						repeatPass: '', //密码2
						regYzm: ''
					},
					pass: {
						IphoneError: false,
						newPass: false,
						Tel: '',
						passYzm: '',
						zzxmm: '' //设置新密码
					},
					huakuai1Show: false,
					huakuai2Show: false,
					token1: '',
					token2: '',
					regText: '>>点击获取验证',
					zhaohuiText: '>>点击获取验证',
					huakuaiSuccess: false, //滑块验证通过
					huakuai2Success: false
				}
			}
		},
		created: function() {
			hasLogin().then((data) => {
				if(data.data.userInfo) {
					this.loginShowToggle = false
					let type = data.data.userInfo.type //是否是手机号登录
					if(type == 1) {
						this.hasLoginType = true
					} else {
						this.hasLoginType = false
					}
				}
			})
			
		}, // 创建时
		beforeMount: function() {}, // 挂载之前
		mounted: function() {
			// this.getQr()
			this.$bus.$on('userLogin', data => {
				if(data) {
					/* 判断是否登陆 */
					if(this.loginShowToggle) {
						/* 未登陆 */
						this.goLogin()
					} else {
						this.$router.push('/application')
					}
				}
			})
			this.$bus.$on('userOut', data => {
				this.userOut()
			})
			this.$bus.$on('footShow', data => {
				this.footerShow = data
			})
			this.$bus.$on('proShow', data => {
				this.ProShow = data
			})
			
			/*？？？？？*/
			setInterval(() => {
				$('#tuichu').on('click', () => {
					/*点击退出*/
					signout()

				})
			}, 1000)
			/*？？？？？*/
			var _that = this
			var bIE9 = false

			// var http = '192.168.100.146:8011'

			var http = window.location.host

			if(navigator.appName == 'Microsoft Internet Explorer' && navigator.appVersion.match(/[6789]./i)) {
				bIE9 = true
			}
			var wsUrl = 'ws' + (!bIE9 && 'https:' == document.location.protocol ? 's' : '') + '://' + http + '/jyop/ws'
			var ws = ''
			var qrCodeTime = 0
			window.isLogin = false //登录状态
			var qrCodeKey = ''
			var isPageHidden = false;
			try {
				if(window.addEventListener) {
					document.addEventListener('visibilitychange', function() {
						if(document.hidden) {
							isPageHidden = true;
						} else {
							isPageHidden = false;
						}
					});
				}
			} catch(e) {}
			//心跳检测
			var WebSocketHeartCheck = function(scoketType) {
				this.lockReconnect = false //避免重复连接
				this.timeout = 5000 //60秒
				this.timeoutObj = null
				this.serverTimeoutObj = null
				this.reset = function() {
					clearTimeout(this.timeoutObj)
					clearTimeout(this.serverTimeoutObj)
					return this
				}
				this.start = function(w, f) {
					if(f) {
						return
					}
					var self = this
					this.timeoutObj = setTimeout(function() {
						//这里发送一个心跳，后端收到后，返回一个心跳消息，
						//onmessage拿到返回的心跳就说明连接正常
						if(w.readyState == 1) {
							w.send('HeartBeat')
						}
						self.serverTimeoutObj = setTimeout(function() { //如果超过一定时间还没重置，说明后端主动断开了
							//用自己的超时，如果用w.colse()执行之后，大概要一分钟才会执行webscoket自己的close方法，时间太长
							//进行ajax轮询
							if(scoketType == 'login') {
								LoginPolling.isPostLoginPolling = true
							}
							w.close() //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
						}, self.timeout)
					}, this.timeout)
				}
			}
			//轮询查询
			var LoginPolling = {
				isPostLoginPolling: false, //是否发起轮询请求
				loginPollingInterval: null,
				initInterval: null,
				init: function() {
					//防止重复调用
					if(this.initInterval != null) {
						return
					}
					//先发一个消息，保存session
					this.postId()
					this.initInterval = setInterval(this.postId, 3000)
				},
				postId: function() {
					if(isPageHidden || qrCodeKey == "") {
						return;
					}
					$ajax.post('/jyop/wxLoginPolling', {
						reqType: 1,
						id: qrCodeKey
					}).then(res => {
						clearInterval(LoginPolling.initInterval)

					})

				},
				start: function() {
					//防止重复调用
					if(this.loginPollingInterval != null) {
						return
					}
					//定时器，定时请求看是否扫码登录，返回用户信息，登录
					this.loginPollingInterval = setInterval(function() {
						//如果浏览器不支持webscoket，走ajax轮询方式
						if(window.WebSocket == undefined) {
							LoginPolling.isPostLoginPolling = true
						}
						if(!LoginPolling.isPostLoginPolling || isPageHidden) {
							return
						}
						$ajax.post('/jyop/wxLoginPolling', {
							reqType: 2
						}).then((data) => {
							loginCallBack(data)
						})
					}, 5000)
				},
				stop: function() {
					clearInterval(this.loginPollingInterval)
					this.initInterval = null
					this.loginPollingInterval = null
					this.isPostLoginPolling = false
				}
			}
			var webSocketHeartCheck = new WebSocketHeartCheck('login')
			//创建websocket连接
			var createWebSocket = function(flag) {
				try {
					ws = new WebSocket(wsUrl) //实例化websocket对象
					initEventHandle(flag)
				} catch(e) {
					reconnect()
					console.log(e)
				}
			}
			//
			var initEventHandle = function(flag) {
				ws.onmessage = function(e) {
					//接收消息正常，就不再发ajax轮询
					LoginPolling.isPostLoginPolling = false
					if(e.data == '') {
						return
					} else if(e.data == 'HeartBeat') { //心跳检测
						//如果获取到消息，心跳检测重置
						//拿到任何消息都说明当前连接是正常的
						webSocketHeartCheck.reset().start(ws, isLogin)
						return
					}
					//用户登录
					loginCallBack($.parseJSON(e.data))
				}
				ws.onerror = function(e) {
					//console.info("onerror");
					reconnect()
				}
				ws.onclose = function(e) {
					//console.info("onclose");
					reconnect()
				}
				ws.onopen = function(e) {
					if(flag) { //重连之后发送shareid
						SendMsg()
					}
					//心跳检测重置
					webSocketHeartCheck.reset().start(ws, isLogin)
				}
			}

			//
			function reconnect() {
				if(webSocketHeartCheck.lockReconnect || isLogin) {
					return
				}
				LoginPolling.isPostLoginPolling = true
				webSocketHeartCheck.lockReconnect = true
				LoginPolling.init()
				//没连接上会一直重连，设置延迟避免请求过多
				setTimeout(function() {
					createWebSocket(true)
					webSocketHeartCheck.lockReconnect = false
				}, 2000)
			}

			//超时重新加载二维码
			var qrCodeTimeout = function() {
				setInterval(function() {
					qrCodeTime++
					if(qrCodeTime > 30 * 60) {
						loadQrCode()
						qrCodeTime = 0
					}
				}, 1000)
				LoginPolling.init()
				SendMsg()
			}
			var SendMsg = function() {
				//向后台发送websocket数据
				if(window['WebSocket']) {
					if(ws.readyState == 1) {
						
						ws.send(qrCodeKey)
					} else {
						LoginPolling.isPostLoginPolling = true
					}
				} else {
					LoginPolling.isPostLoginPolling = true
				}
			}

			//生成页面二维码，不同页面处理逻辑
			function loadQrCode() {
				if(isLogin) {
					return
				}
				var oldQrCodeKey = ''
				if(localStorage && typeof(localStorage.qrCodeKey) != 'undefined') {
					oldQrCodeKey = localStorage.qrCodeKey
				}
				if(oldQrCodeKey != '') {
					qrCodeKey = oldQrCodeKey
					_that.validator.login.loginEwm = '/jyop/qr/' + qrCodeKey
					_that.qr =  '/jyop/qr/' + qrCodeKey

				} else {
					getQr({
						qrCodeKey: oldQrCodeKey
					}).then((res) => {
						qrCodeKey = res.data
						localStorage.setItem('qrCodeKey', qrCodeKey)
						_that.validator.login.loginEwm = '/jyop/qr/' + qrCodeKey
						_that.qr =  '/jyop/qr/' + qrCodeKey
						
						// qr/key
					})
				}
				setTimeout(function() {
					qrCodeTimeout()
				}, 500)
			}

			//查询用户信息，响应页面登录信息
			function loginCallBack(d) {
				let data = d.data;
				if(!data) {
					return;
				}
				/*手机号登录或者微信登录*/
				if(data.status == 1) {
					if(data.userInfo.type == 1) {
						_that.hasLoginType = true
					} else {
						_that.hasLoginType = false
					}
					window.sigoutFlag = true
					isLogin = true
					//登录成功，停止轮询
					/*登录成功*/
					console.log('--_that--', _that)
					_that.close()
					_that.loginShowToggle = false
					let userInfo = data.userInfo
					_that.validator.login.iphoneNumber = userInfo.nickname
					/*是否显示Pro*/
					if(!userInfo.haspro || userInfo.freeze){
						this.ProShow = false
					}else{
						this.ProShow = true
					}
					if(userInfo.headimage) {
						_that.validator.login.userImgShow = false
						_that.validator.login.userImg = userInfo.headimage
					}
					LoginPolling.stop()
					try {
						//登录成功，停止心跳监测
						webSocketHeartCheck.reset()
						if(ws.readyState == 1) {
							ws.send('close')
							ws.close()
						}
					} catch(err) {
						console.log('--err--', err)
					}
				}
			}

			//退出登录
			window.sigoutFlag = true //window 控制请求次数

			function signout() {
				if(window.sigoutFlag) {
					window.sigoutFlag = false
					LoginPolling.start()
					createWebSocket(true)
					loadQrCode()
					isLogin = false
					_that.loginShowToggle = true

					$ajax.post('/jyop/signOut').then(() => {
						//if(data == "ok") {
						try {
							$.cookie('userid_secure', '', {
								expires: -1,
								path: '/'
							})
						} catch(e) {
							document.cookie = 'userid_secure=;expires=-1;path=/'
						}
						// _that.$router.push('/')
						window.location.reload()
						//}
					})
				}

			}

			//查看用户是否已经登录
			function haslogin() {

				$ajax.post('/jyop/hasLogin').then((data) => {
					
					if(!data.data) {
						return;
					}
					if(data.data.status == 1) {
						isLogin = true
						/*登录成功*/
						_that.close()
						_that.loginShowToggle = false
						let userInfo = data.data.userInfo
						_that.validator.login.iphoneNumber = userInfo.nickname
						//是否冻结pro
						if(!userInfo.haspro || userInfo.freeze){
							_that.ProShow = false
						}else{
							_that.ProShow = true
						}
						if(userInfo.headimage) {
							_that.validator.login.userImgShow = false
							_that.validator.login.userImg = userInfo.headimage
						}
					} else {
						isLogin = false
						loadQrCode()
						LoginPolling.start()
						createWebSocket(false)
						_that.$emit('loginShowToggle', _that.loginShowToggle)

					}
				})
			}

			haslogin()

			/*-----------------------------------------------*/
			$('#huakuai1').slideVerify({
				type: 2, //类型
				vOffset: 5, //误差量，根据需求自行调整
				vSpace: 5, //间隔
				imgName: ['1.png', '2.png', '3.png', '4.png', '5.png'],
				imgSize: {
					width: '400px',
					height: '200px',
				},
				blockSize: {
					width: '80px',
					height: '80px',
				},
				barSize: {
					width: '400px',
					height: '40px',
				},
				ready: function() {},
				success: function(obj) {
					_that.validator.huakuaiSuccess = true
					_that.validator.huakuai1Show = false
					_that.validator.regText = '验证成功'

				},
				error: function() {}

			})
			/****************/
			$('#huakuai2').slideVerify({
				type: 2, //类型
				vOffset: 5, //误差量，根据需求自行调整
				vSpace: 5, //间隔
				imgName: ['1.png', '2.png', '3.png', '4.png', '5.png'],
				imgSize: {
					width: '400px',
					height: '200px',
				},
				blockSize: {
					width: '80px',
					height: '80px',
				},
				barSize: {
					width: '400px',
					height: '40px',
				},
				ready: function() {},
				success: function(obj) {
					_that.validator.huakuai2Success = true
					_that.validator.huakuai2Show = false
					_that.validator.zhaohuiText = '验证成功'

				},
				error: function() {}

			})

		}, // 挂载之后
		beforeUpdate: function() {}, // 数据更新时调用,在渲染之前
		updated: function() {}, // 数据更新后,渲染后调用(禁止)
		beforeDestroy: function() {}, // 实例销毁前调用,解绑中间层的数据传输
		destroyed: function() {}, // 实例销毁后调用
		methods: {
			inputChange(s) {
				if(s === 'pass') {
					this.validator.huakuai2Success = false
					this.validator.zhaohuiText = '>>点击获取验证码'
				} else {
					this.validator.huakuaiSuccess = false
					this.validator.regText = '>>点击获取验证码'
				}
			},
			goLogin() {
				console.log('--goLogin--')
				document.getElementById("userLogin").click()
			},
			goDev() {
				this.$router.replace('/application')
			},
			userOut() {
				outUser().then(res => {
					if(res.status === 200) {
						window.sigoutFlag = false
						window.isLogin = false
						this.loginShowToggle = true
						this.$router.push('/')
					}
				}).catch(err => {
					console.error('--err--', err)
				})
			},
			getQr(old, callback) {
				var oldQrCodeKey = ''
				if(localStorage && typeof(localStorage.qrCodeKey) != 'undefined') {
					oldQrCodeKey = localStorage.qrCodeKey
				}
				if(oldQrCodeKey != '') {
					qrCodeKey = oldQrCodeKey
					this.validator.login.loginEwm = '/jyop/qr/' + qrCodeKey

				} else {
					$ajax.post('/jyop/getQrCode', {
						qrCodeKey: oldQrCodeKey
					}).then((res) => {
						qrCodeKey = res.data
						localStorage.setItem('qrCodeKey', qrCodeKey)
						// qr/key
					})
				}
				getQr({
					qrCodeKey: old
				}).then(res => {
					localStorage.setItem('qrCodeKey', res.data)
					this.validator.login.loginEwm = '/jyop/qr/' + res.data
					typeof callback === 'function' ? callback() : null
				}).catch(err => {
					console.log('--err--', err)
				})
			},
			/*登录*/
			login() {
				this.masterStatus.masterShow = true
				this.masterStatus.loginShow = true
			},
			/*点击打开注册*/
			register() {
				/* 关闭验证码 */
				this.validator.huakuai1Show = false
				this.validator.huakuai2Show = false
				this.validator.regText = '>>点击获取验证码'
				this.validator.huakuaiSuccess = false

				this.masterStatus.masterShow = true
				this.masterStatus.loginShow = false
				this.masterStatus.regsShow = true
			},
			/*现在就登录*/
			repeatLogin() {
				/* 关闭验证码 */
				this.validator.huakuai1Show = false
				this.validator.huakuai2Show = false
				this.masterStatus.regsShow = false
				this.masterStatus.loginShow = true
			},
			/*找回密码*/
			retrievePassword() {
				/* 关闭验证码 */
				this.validator.huakuai1Show = false
				this.validator.huakuai2Show = false
				this.validator.zhaohuiText = '>>点击获取验证码'
				this.validator.huakuai2Success = false
				this.masterStatus.loginShow = false
				this.masterStatus.retrievePassword = true
			},
			/*获取验证码*/
			huoquyanzhengma() {
				if(!this.LoginIphone('res')) {
					this.validator.huakuaiSuccess = false
				}
				this.validator.regText = '>>点击获取验证码'

				this.validator.token1 = sessionStorage.getItem('regToken')

				/*给用户发验证码*/
				if(this.LoginIphone('res') && this.validator.huakuaiSuccess) {
					regstierYz({
						'token': this.validator.token1,
						'reqType': 'sendIdentCode',
						'phone': this.validator.res.Tel
					}).then((data) => {
						console.log(data)
						if(data.data.status == 'userExists') {
							this.$message.error('用户已经存在！！！')
						} else if(data.data.status == 'verfifyError') {
							this.$message.error('验证码校验没有通过！！！')
						} else if(data.data.status == 'y') {
							this.validator.huakuaiSuccess = false //控制滑块验证
							const TIME_COUNT = 60
							if(!this.yanzhengma.timer) {
								this.yanzhengma.count = TIME_COUNT
								this.yanzhengma.show = false
								this.yanzhengma.timer = setInterval(() => {
									if(this.yanzhengma.count > 0 && this.yanzhengma.count <= TIME_COUNT) {
										this.yanzhengma.count--
									} else {
										this.yanzhengma.show = true
										clearInterval(this.yanzhengma.timer)
										this.yanzhengma.timer = null
									}
								}, 1000)
							}
						}
					})
				} else {
					this.$message.error('手机号码错误或者验证没有通过！！！')
					this.validator.huakuaiSuccess = false
				}

			},
			/*找回密码*/
			zhaohuimima() {
				if(!this.LoginIphone('pass')) {
					this.validator.huakuai2Success = false
				}
				this.validator.zhaohuiText = '>>点击获取验证码'

				this.validator.token2 = sessionStorage.getItem('regToken')
				if(this.LoginIphone('pass') && this.validator.huakuai2Success) {
					zhaohuimima({
						'reqType': 'sendIdentCode',
						'phone': this.validator.pass.Tel,
						'token': this.validator.token2
					}).then((data) => {
						let info = data.data.status
						if(info == 'userNotExists') {
							this.$message.error('用户名不存在！！！')
						} else if(info == 'verfifyError') {
							this.$message.error('验证码不通过！！！')
						} else if(info == 'y') {
							this.validator.huakuai2Success = false //控制滑块验证
							const TIME_COUNT = 60
							if(!this.yanzhengma.timer) {
								this.yanzhengma.count = TIME_COUNT
								this.yanzhengma.show = false
								this.yanzhengma.timer = setInterval(() => {
									if(this.yanzhengma.count > 0 && this.yanzhengma.count <= TIME_COUNT) {
										this.yanzhengma.count--
									} else {
										this.yanzhengma.show = true
										clearInterval(this.yanzhengma.timer)
										this.yanzhengma.timer = null
									}
								}, 1000)
							}
						}

					})
				}

			},
			zhaohuimimaSubmit() {
				this.validator.token2 = sessionStorage.getItem('regToken')
				if(this.validator.pass.zzxmm.length < 6) {
					this.$message.error('设置的新密码不能少于6位')
					this.validator.pass.newPass = true
				} else {
					this.validator.pass.newPass = false
					zhaohuimima({
						'token': this.validator.token2,
						'password': this.validator.pass.zzxmm,
						'identCode': this.validator.pass.passYzm,
						'reqType': 'save'
					}).then((data) => {
						let info = data.data.status
						if(info == 'identCodeError') {
							this.$message.error('短信验证码错误！！！')
						} else if(info == 'y') {
							this.$message.success('密码修改成功！！！')
							this.close()
						}
					})
				}
			},
			/*关闭*/
			close() {
				this.masterStatus.masterShow = false
				this.masterStatus.loginShow = false
				this.masterStatus.regsShow = false
				this.masterStatus.retrievePassword = false
				/* 关闭验证码 */
				this.validator.huakuai1Show = false
				this.validator.huakuai2Show = false
				/* 清空数据 */
				this.validator.login.Tel = ''
				this.validator.login.pass = ''
				this.validator.login.IphoneError = false
				this.validator.login.passError = false
				this.validator.pass.Tel = ''
				this.validator.pass.passYzm = ''
				this.validator.pass.zzxmm = ''
				this.validator.pass.IphoneError = false
				this.validator.pass.newPass = false
				this.validator.res.Tel = ''
				this.validator.res.pass = ''
				this.validator.res.repeatPass = ''
				this.validator.res.regYzm = ''
				this.validator.res.IphoneError = false
				this.validator.res.passError = false
				this.validator.res.repeatError = false
				// this.validator = {
				//   login: {
				//     IphoneError: false,
				//       passError: false,
				//       Tel: '',
				//       pass: '',
				//       /*登录电话*/
				//       iphoneNumber: '',
				//       defloginImg: require('../assets/login-img.png'),
				//       userImg: '',
				//       userImgShow: true,
				//       loginEwm: ''
				//
				//   },
				//   res: {
				//     IphoneError: false,
				//       passError: false,
				//       repeatError: false,
				//       Tel: '',
				//       pass: '', //密码1
				//       repeatPass: '',//密码2
				//       regYzm: ''
				//   },
				//   pass: {
				//     IphoneError: false,
				//       newPass: false,
				//       Tel: '',
				//       passYzm: '',
				//       zzxmm: ''//设置新密码
				//   },
				//   huakuai1Show: false,
				//     huakuai2Show: false,
				//     token1: '',
				//     token2: '',
				//     regText: '>>点击获取验证',
				//     zhaohuiText: '>>点击获取验证',
				//     huakuaiSuccess: false, //滑块验证通过
				//     huakuai2Success: false
				// }
			},
			/*验证手机*/
			LoginIphone(name) {
				let reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
				if(this.validator[name].Tel == '') {
					this.validator[name].IphoneError = true
					this.$message.error('账号不能为空')
					return false
				} else if(!reg.test(this.validator[name].Tel)) {
					this.validator[name].IphoneError = true
					this.$message.error('账号格式不对')
					return false
				} else {
					this.validator[name].IphoneError = false
					return true
				}
			},
			isPassWord(name) {
				console.log(this.validator[name].pass.length)
				if(this.validator[name].pass.length < 6) {
					this.validator.login.passError = true
					this.$message.error('密码不能少于6位')
					return false
				} else {
					this.validator.login.passError = false
					return true
				}
			},
			/*验证注册两次设置密码是否一样*/
			repeatPass() {

				if(this.validator.res.pass.length < 6) {
					this.validator.res.passError = true
					return false
				} else {
					this.validator.res.passError = false

				}
				if(this.validator.res.pass !== this.validator.res.repeatPass) {
					this.validator.res.passError = true
					this.validator.res.repeatError = true
					return false
				} else {
					this.validator.res.passError = false
					this.validator.res.repeatError = false

				}
				return true
			},
			/*logon登录*/
			loginSubmit() {
				this.LoginIphone('login')
				this.isPassWord('login')
				if(this.LoginIphone('login') && this.isPassWord('login')) {
					login({
						'phone': this.validator.login.Tel,
						'password': this.validator.login.pass
					}).then((data) => {
						let status = data.data.status
						if(status == -1) {
							this.$message.error('用户不存在！！！')
							this.validator.res.passError = true
							this.validator.res.repeatError = true
						} else if(status == -2) {
							this.$message.error('手机号或密码错误！！！')
							this.validator.res.passError = true
							this.validator.res.repeatError = true
						} else if(status == 1) {
							window.sigoutFlag = true //window
							this.validator.res.passError = false
							this.validator.res.repeatError = false
							
							
							/*登录成功*/
							this.close()
							this.loginShowToggle = false
							let userInfo = data.data.userInfo
							this.validator.login.iphoneNumber = userInfo.nickname
							/*是否显示Pro*/
							if(!userInfo.haspro || userInfo.freeze){
								this.ProShow = false
							}else{
								this.ProShow = true
							}
							if(userInfo.headimage) {
								this.validator.login.userImgShow = false
								this.validator.login.userImg = userInfo.headimage
							}

						}
					})
				}

			},
			/*注册submit*/
			registerZh() {
				this.LoginIphone('res') //验证登录信息

				if(this.LoginIphone('res') && this.validator.res.regYzm && this.repeatPass()) {
					/*提交*/
					regstierYz({
						'reqType': 'save',
						'password': this.validator.res.pass,
						'identCode': this.validator.res.regYzm
					}).then((data) => {
						let info = data.data.status
						if(info == 'identCodeError') {
							this.$message.error('验证校验失败！！！')
						} else if(info == 'y') {
							this.$message({
								message: '注册成功',
								type: 'success'
							})
							this.close()
							this.loginShowToggle = false
							let userInfo = data.data.userInfo
							this.validator.login.iphoneNumber = userInfo.nickname
							if(userInfo.headimage) {
								this.validator.login.userImgShow = false
								this.validator.login.userImg = userInfo.headimage
							}
						}
					})
				}

			},
			huakuai1Show() {
				this.validator.huakuai1Show = true
				/*验证通过了*/
				if(this.validator.huakuaiSuccess) {
					this.validator.huakuai1Show = false
				}
			},
			huakuai2Show() {

				this.validator.huakuai2Show = true
				/*验证通过了*/
				if(this.validator.huakuai2Success) {
					this.validator.huakuai2Show = false
				}
			},
			/*点击空白关闭滑块*/
			closeHk() {
				this.validator.huakuai1Show = false;
				this.validator.huakuai2Show = false;

			}

		}, // 函数
		watch: {
			'$route' (to, from) {
				/* 返回顶部 */
				document.documentElement.scrollTop = 0
				/* 未登录可访问白名单 */
				let arr = ['/', 'scene', 'devWiki', 'us']
				
				/* 退出登陆 */
				if(this.loginShowToggle && !arr.includes(to.name)) {
					console.log('--返回首页--')
					return this.$router.push('/')
				}
				const toDepth = to.path.split('/').length
				const fromDepth = from.path.split('/').length
				this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
				this.footerShow = true
			}
		}

	}
</script>

<style lang="scss">
	@import "../static/web/css/verify.css";
	.bs {
		border-bottom: 1px solid #d3d3d3;
	}
	
	.el-dropdown-menu__item {
		text-align: center;
		width: 100px;
	}
	
	.index {
		width: 100%;
		.nav {
			height: 100px;
			background: #fff url(../assets/logo.png) 0 center no-repeat;
			.loginLinkJy {
				display: inline-block;
				width: 120px;
				height: 100%;
			}
			.login-success {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 31px;
				.login-right {
					cursor: pointer;
					span {
						max-width: 8rem;
						overflow: hidden;
						text-overflow: ellipsis;
						display: inline-block;
						white-space: nowrap;
					}
				}
				img {
					display: inline-block;
					width: 32px;
					height: 32px;
					border-radius: 100%;
					margin-right: 13px;
				}
			}
		}
		/*链接*/
		.link {
			display: inline-block;
			font-size: 18px;
			float: right;
			padding-top: 42px;
			li {
				display: inline-block;
				margin-right: 70px;
				a {
					position: relative;
					color: #333;
					&::before {
						display: none;
						content: "";
						position: absolute;
						left: 0;
						top: 33px;
						width: 35px;
						height: 2px;
						background-color: #2CB7CA;
					}
					&.active {
						color: #2cb7ca;
						&::before {
							display: block;
						}
					}
					&.router-link-exact-active {
						color: #2cb7ca;
						&::before {
							display: block;
						}
					}
				}
				.index-2 {
					&::before {
						left: 17px;
					}
				}
			}
		}
		.navdown {
			font-size: 18px;
			color: #333;
			cursor: pointer;
			&:hover {
				color: #2CB7CA;
			}
			&:hover .linksanjiao {
				color: #2CB7CA;
			}
		}
		.linksanjiao {
			font-size: 12px;
			color: #000;
			font-weight: bold;
		}
		.login {
			width: 66px;
			height: 30px;
			line-height: 30px;
			border: 1px solid #cccccc;
			float: right;
			font-size: 14px;
			color: #666;
			text-align: center;
			margin-top: 33px;
			border-radius: 3px;
			&:hover {
				color: #2CB7CA;
				border-color: #2CB7CA;
			}
		}
		.footer {
			.info {
				width: 100%;
				height: 316px;
				background: url(../assets/pub-tooter.jpg) 0 0 no-repeat;
				background-size: cover;
				.inner {
					height: 316px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.item {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						.dd {
							width: 191px;
							height: 173px;
							position: absolute;
							margin-left: 38px;
							background: url("../assets/yyy.png");
						}
						.icon {
							width: 114px;
							height: 114px;
							background-color: #fff;
							z-index: 2;
							border-radius: 10px;
							display: flex;
							justify-content: center;
							align-items: center;
							.icon-api {
								font-size: 120px;
							}
							.icon-wangluo {
								font-size: 90px;
							}
							i {
								font-size: 64px;
								color: #2CB7CA;
							}
						}
						p {
							margin-top: 40px;
							color: #fff;
							font-size: 19px;
							text-align: center;
						}
					}
				}
			}
			.firendlink {
				height: 160px;
				background-color: #454545;
				.inner {
					height: 160px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				ul {
					color: #fff;
					display: flex;
					li {
						border-right: 3px solid #fff;
						padding: 0 30px;
						&:last-of-type {
							border-right: none;
						}
						a {
							font-size: 20px;
							transition: all 0.5s;
							color: #fff;
							&:hover {
								color: #2CB7CA;
							}
							.icon-gongzhonghao {
								font-size: 21px;
								margin-right: 10px;
							}
						}
					}
				}
			}
		}
		.child-view {
			width: 100%;
			height: 100%;
			transition: all .5s cubic-bezier(.55, 0, .1, 1);
		}
		.slide-left-enter,
		.slide-right-leave-active {
			opacity: 0;
			-webkit-transform: translate(1200px, 0);
			transform: translate(1200px, 0);
		}
		.slide-left-leave-active,
		.slide-right-enter {
			opacity: 0;
			-webkit-transform: translate(-1200px, 0);
			transform: translate(-1200px, 0);
		}
		.master {
			position: fixed;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, .2);
			z-index: 999;
			/*login*/
			.m-login {
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -275px;
				margin-top: -190px;
				width: 550px;
				height: 380px;
				background-color: #fff;
				border-radius: 5px;
				.login-title {
					text-align: center;
					color: #2CB7CA;
					font-size: 25px;
					line-height: 100px;
				}
				.close {
					position: absolute;
					right: -20px;
					top: -20px;
					width: 40px;
					cursor: pointer;
					height: 40px;
					transition: all 0.5s;
					background: url(../assets/close.png) 0 0 no-repeat;
					z-index: 1000;
					&:hover {
						transform: scale(1.1);
					}
				}
				.login-inner {
					padding: 0 45px 45px 45px;
					.left {
						width: 170px;
						box-sizing: border-box;
						padding-right: 35px;
						text-align: center;
						font-size: 16px;
						color: #000;
						font-weight: bold;
						border-right: 1px solid #d7d7d7;
						img {
							display: block;
							width: 135px;
							height: 132px;
							margin-top: 25px;
							margin-bottom: 25px;
							transform: scale(1.35);
						}
						.bottom {
							color: #999999;
							font-weight: normal;
							line-height: 20px;
							font-size: 14px;
						}
					}
					.right {
						width: 288px;
						box-sizing: border-box;
						padding-left: 36px;
						p {
							font-size: 16px;
							font-weight: bold;
							margin-bottom: 26px;
						}
						label {
							display: block;
							margin-bottom: 5px;
						}
						.iphone,
						.passwrod {
							width: 100%;
							line-height: 44px;
							height: 44px;
							padding-left: 40px;
							background: #fff url(../assets/pub-iphone.png) 14px center no-repeat;
							border: 1px solid #d7d7d7;
							box-sizing: border-box;
							border-radius: 3px;
							&.error {
								border: 1px solid red;
							}
						}
						.passwrod {
							background: #fff url(../assets/pub-password.png) 14px center no-repeat;
						}
						.submit {
							width: 100%;
							height: 46px;
							line-height: 46px;
							text-align: center;
							color: #fff;
							background-color: #2CB7CA;
							font-size: 16px;
							border: none;
							margin-top: 28px;
							cursor: pointer;
							border-radius: 4px;
						}
						.bottom {
							display: flex;
							justify-content: space-between;
							margin-top: 8px;
							a {
								color: #2CB7CA;
								font-size: 12px;
								font-weight: normal;
							}
						}
					}
				}
			}
			/*注册*/
			.m-register {
				width: 440px;
				height: 476px;
				background-color: #fff;
				border-radius: 5px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -220px;
				margin-top: -242px;
				box-sizing: border-box;
				padding: 0 50px 38px 50px;
				.register-title {
					text-align: center;
					color: #2CB7CA;
					font-size: 25px;
					line-height: 100px;
				}
				.reg-from {
					label {
						display: block;
						margin-bottom: 10px;
					}
					.iphone,
					.passwrod {
						width: 100%;
						line-height: 44px;
						height: 44px;
						padding-left: 40px;
						background: #fff url(../assets/pub-iphone.png) 14px center no-repeat;
						border: 1px solid #d7d7d7;
						box-sizing: border-box;
						border-radius: 3px;
						&.error {
							border: 1px solid red;
						}
					}
					.passwrod {
						background: #fff url(../assets/pub-password.png) 14px center no-repeat;
						&.error {
							border: 1px solid red;
						}
					}
					.img-click {
						height: 44px;
						line-height: 44px;
						text-align: center;
						background-color: #f2f2f2;
						color: #2CB7CA;
						cursor: pointer;
						font-size: 14px;
						margin-bottom: 10px;
					}
					.yzm {
						height: 44px;
						line-height: 44px;
						border: 1px solid #d7d7d7;
						box-sizing: border-box;
						border-radius: 3px;
						input {
							width: 208px;
							border: none;
							height: 40px;
							line-height: 40px;
							padding-left: 12px;
							box-sizing: border-box;
						}
						.huoqu {
							width: 130px;
							text-align: center;
							font-size: 14px;
							height: 44px;
							line-height: 44px;
							color: #fff;
							background-color: #2CB7CA;
							cursor: pointer;
						}
					}
					.submit {
						width: 100%;
						height: 46px;
						line-height: 46px;
						text-align: center;
						color: #fff;
						background-color: #2CB7CA;
						font-size: 16px;
						border: none;
						margin-top: 8px;
						cursor: pointer;
						border-radius: 4px;
					}
					.yijing {
						display: block;
						text-align: right;
						line-height: 22px;
						color: #2CB7CA;
						font-size: 12px;
					}
				}
				.close {
					position: absolute;
					right: -20px;
					top: -20px;
					width: 40px;
					cursor: pointer;
					height: 40px;
					transition: all 0.5s;
					background: url(../assets/close.png) 0 0 no-repeat;
					z-index: 1000;
					&:hover {
						transform: scale(1.1);
					}
				}
			}
			/*找回密码*/
			.retrievePassword {
				width: 440px;
				height: 417px;
				background-color: #fff;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -220px;
				margin-top: -216px;
				border-radius: 5px;
				box-sizing: border-box;
				padding: 0 50px 50px 50px;
				.retrievePassword-title {
					text-align: center;
					color: #2CB7CA;
					font-size: 25px;
					line-height: 100px;
				}
				.retrievePassword-from {
					label {
						display: block;
						margin-bottom: 10px;
					}
					.iphone,
					.passwrod {
						width: 100%;
						line-height: 44px;
						height: 44px;
						padding-left: 40px;
						background: #fff url(../assets/pub-iphone.png) 14px center no-repeat;
						border: 1px solid #d7d7d7;
						box-sizing: border-box;
						border-radius: 3px;
						&.error {
							border: 1px solid red;
						}
					}
					.passwrod {
						background: #fff url(../assets/pub-password.png) 14px center no-repeat;
					}
					.img-click {
						height: 44px;
						line-height: 44px;
						text-align: center;
						background-color: #f2f2f2;
						color: #2CB7CA;
						cursor: pointer;
						font-size: 14px;
						margin-bottom: 10px;
					}
					.yzm {
						height: 44px;
						line-height: 44px;
						border: 1px solid #d7d7d7;
						box-sizing: border-box;
						border-radius: 3px;
						input {
							width: 208px;
							border: none;
							height: 40px;
							line-height: 40px;
							padding-left: 12px;
							box-sizing: border-box;
						}
						.huoqu {
							width: 130px;
							text-align: center;
							font-size: 14px;
							height: 44px;
							line-height: 44px;
							color: #fff;
							background-color: #2CB7CA;
							cursor: pointer;
						}
					}
					.submit {
						width: 100%;
						height: 46px;
						line-height: 46px;
						text-align: center;
						color: #fff;
						background-color: #2CB7CA;
						font-size: 16px;
						border: none;
						margin-top: 8px;
						cursor: pointer;
						border-radius: 4px;
					}
				}
				.close {
					position: absolute;
					right: -20px;
					top: -20px;
					width: 40px;
					cursor: pointer;
					height: 40px;
					transition: all 0.5s;
					background: url(../assets/close.png) 0 0 no-repeat;
					z-index: 1000;
					&:hover {
						transform: scale(1.1);
					}
				}
			}
			/*滑块*/
			.zhuce,
			.zhaohui {
				width: 100vw;
				height: 100vh;
				background-color: rgba(0, 0, 0, .5);
				position: fixed;
				box-sizing: border-box;
				z-index: 10000;
				#huakuai1,
				#huakuai2 {
					width: 402px;
					position: absolute;
					left: 50%;
					top: 50%;
					margin-left: -201px;
					margin-top: -100px;
				}
			}
		}
	}
	/*下拉*/
	
	.el-dropdown-menu {
		.el-dropdown-menu__item {
			a {
				font-size: 14px;
			}
		}
	}
	
	.hover-qr {
		position: relative;
		&:hover {
			.s-qr {
				opacity: 1;
				left: 156px;
			}
		}
		.s-qr {
			position: absolute;
			top: -100px;
			left: 0;
			background: url("../assets/hover-qr.png") no-repeat 0 0;
			transition: all 0.6s;
			opacity: 0;
			width: 146px;
			height: 137px;
			img {
				width: 144px;
				height: 137px;
				margin-left: 9px;
			}
		}
	}
	
	.index .nav .login-success .login-right span {
		line-height: 20px;
	}
</style>